<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<div id="searchParam" shiro:hasPermission="sys:log:list">
  <div class="layui-form-item">
    <div class="layui-input-inline">
      <input type="text" id="userId" class="layui-input" autocomplete="off" placeholder="用户ID">
    </div>
    <div class="layui-input-inline">
      <input type="text" id="username" class="layui-input" autocomplete="off" placeholder="请输入账号">
    </div>
    <div class="layui-input-inline">
      <input type="text" id="operation" class="layui-input" autocomplete="off" placeholder="用户操作动作">
    </div>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" id="createTime" placeholder="创建时间">
    </div>
    <div class="layui-input-inline ">
      <button class="layui-btn" id="search">查询</button>
    </div>
  </div>

</div>
<table class="layui-hide" id="log_table" lay-filter="log_table"></table>
<div id="laypage" class="layui-laypage-btn"></div>
</body>
<script type="text/html" id="toolbar">
  <div class="layui-btn-group">
    <button type="button" class="layui-btn" lay-event="batchDelLog" shiro:hasPermission="sys:log:delete">
      <i class="layui-icon">&#xe608;</i> 批量删除
    </button>
  </div>
</script>
<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delLog" shiro:hasPermission="sys:log:delete">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script>
  layui.use(['table', 'laypage', 'laydate', 'jquery', 'layer'], function () {
    var table = layui.table;
    var laypage = layui.laypage;
    var laydate = layui.laydate;
    var $ = layui.jquery;
    var layer = layui.layer;
    var searchParam = {
      pageNum: 1,
      pageSize: 10,
      operation: null,
      userId: null,
      username: null,
      startTime: null,
      endTime: null
    };
    CoreUtil.sendAjax("/api/logs", JSON.stringify(searchParam), function (res) {
      //初始化分页插件
      laypageTable(res.data.totalRows, searchParam.pageNum);
      //异步加载表格数据
      if (res.data.list != null) {
        loadTable(res.data.list);
      }
    }, "POST", false, function (res) {
      //无权限访问操作日志列表提示
      layer.msg("抱歉！您暂无获取操作日志列表的权限");
      var noAuthorityData = [];
      loadTable(noAuthorityData);
    });
    //渲染分页插件
    var laypageTable = function (count, currentPage) {
      laypage.render({
        elem: 'laypage'
        , count: count
        , limit: searchParam.pageSize
        , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
        , curr: location.hash.replace('#!currentPage=', '') //获取起始页
        , hash: 'currentPage' //自定义hash值
        , jump: function (obj, first) {
          if (!first) {
            searchParam.pageNum = obj.curr;
            searchParam.pageSize = obj.limit;
            CoreUtil.sendAjax("/api/logs", JSON.stringify(searchParam), function (res) {
              if (res.data.list != null) {
                loadTable(res.data.list);

                laypageTable(res.data.totalRows, searchParam.pageNum);
              }

            }, "POST", false, function (res) {
              //无权限访问操作日志列表提示
              layer.msg("抱歉！您暂无获取操作日志列表的权限");
              var noAuthorityData = [];
              loadTable(noAuthorityData);
            });
          }
        }
      });
    };
    //渲染table
    var loadTable = function (data) {
      //展示已知数据
      table.render({
        elem: '#log_table'
        , cols: [
          [
            {type: 'checkbox', fixed: 'left'},
            {field: 'userId', title: '用户ID', width: 300, sort: true},
            {field: 'username', title: '账号', width: 130},
            {field: 'operation', title: '用户操作', width: 140},
            {field: 'method', title: '请求方法', width: 400},
            {field: 'params', title: '请求参数', width: 300},
            {
              field: 'createTime', title: '创建时间', minWidth: 120, templet: function (item) {
                return CoreUtil.formattime(item.createTime);
              }
            },
            {width: 150, title: '操作', toolbar: '#tool'}
          ]
        ]
        , data: data
        , even: true
        , limit: data.length
        , limits: [10, 20, 30, 40, 50]
        , toolbar: '#toolbar'
      });
    };

    //执行查询
    $("#search").click(function () {
      searchParam.userId = $("#userId").val();
      searchParam.operation = $("#operation").val();
      searchParam.username = $("#username").val();
      searchParam.pageNum = 1;
      CoreUtil.sendAjax("/api/logs", JSON.stringify(searchParam), function (res) {
        //初始化分页器
        laypageTable(res.data.totalRows, searchParam.pageNum);
        //初始化渲染数据
        if (res.data.list != null) {
          loadTable(res.data.list);
        }
      }, "POST", false, function (res) {
        //无权限访问操作日志列表提示
        layer.msg("抱歉！您暂无获取操作日志列表的权限");
        var noAuthorityData = [];
        loadTable(noAuthorityData);
      });
    });

    //日期范围
    laydate.render({
      elem: '#createTime'
      , type: 'datetime'
      , range: '~'
      , done: function (value, date, endDate) {
        if (value != null && value != undefined && value != "") {
          searchParam.startTime = value.split("~")[0];
          searchParam.endTime = value.split("~")[1];
        } else {
          //清空时间的时候要清空以前选择的日期
          searchParam.startTime = null;
          searchParam.endTime = null;
        }
      }
    });

    //表头工具栏事件
    table.on('toolbar(log_table)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'batchDelLog':
          var data = checkStatus.data;
          if (data.length == 0) {
            layer.msg("请选择要批量删除的日志");
          } else {
            var logIds = [];
            $(data).each(function (index, item) {
              logIds.push(item.id);
            });
            // layer.msg(JSON.stringify(logIds));
            tipDialog(logIds);
          }
          break;
      };
    });

    //操作工具栏事件
    table.on('tool(log_table)', function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'delLog':
          var logIds = [];
          logIds.push(data.id);
          // layer.msg(JSON.stringify(logIds));
          tipDialog(logIds);
          break;
      }
    });

    //删除前确认对话框
    var tipDialog = function (logIds) {
      layer.open({
        content: '确定要删除么',
        yes: function (index, layero) {
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendAjax("/api/log", JSON.stringify(logIds), function (res) {
            layer.msg(res.msg);
            $(".layui-laypage-btn").click();
          }, "DELETE", false, function (res) {
            //无权限删除操作日志提示
            layer.msg("抱歉！您暂无删除操作日志的权限");
          });
        }
      });
    }
  });
</script>
</html>